<template>
  <div class="system-msg">
    <div>{{ msg }}</div>
    <div class="time">{{ time }}</div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  msg: string
  time: string
}
defineProps<Props>()

</script>

<style lang="less" scoped>
@sysColor: rgb(163, 13, 255);
@timeColor: rgb(156, 150, 163);

.system-msg {
  padding: 6px 9px;
  margin: 0 14px;
  color: @sysColor;
  background-color: rgba(255, 255, 255, 0.4);
  white-space: break-spaces;
  border-radius: 15px;

  .time {
    color: @timeColor;
    text-align: right;
  }
}
</style>
